<template>
    <div class="box">
        <h3>点击了{{time}} 次,当前次数为{{sum}}</h3>
        <button @click="addition">+</button>
        <button @click="subtraction">-</button>
        <button @click="evenAdd">偶数加法</button>
        <button @click="asyncAdd">异步加法</button>
    </div>
</template>

<script>
    export default {
        name: "App",
        data(){
            return {
                time:0
            }
        },
        methods:{
            addition(){
                let time = this.time;
                this.time = time + 1;
            },
            subtraction(){
                let time = this.time;
                this.time = time - 1;
            },
            evenAdd(){
                let time = this.time;
                if(time % 2 === 0){
                    this.time = time + 1;
                }
            },
            asyncAdd(){
               setTimeout(()=>{
                   this.time += 1;
               },1000)
            }
        },
        computed:{
            sum(){
                return this.time % 2 === 0 ?'偶数':'奇数'
            }
        }
    }
</script>

<style scoped>
    .box{
        margin-left: 30px;
    }
</style>